.navigation {
  @apply fixed top-0 left-0 right-0 z-10;
  .navigationBar {
    @apply box-border flex items-center px-16px;
  }
}
.bgInfo {
  // padding-bottom: 116px;
  padding-bottom: 60px; // 24px + 32px = 56px; 约等于60px吧
  @apply box-border px-[32px] bg-no-repeat bg-center bg-cover relative;
  .info {
    @apply box-border flex flex-row items-center mt-[32px];
    .avatar {
      width: 80px;
      height: 80px;
      @apply rounded-full block object-cover;
    }
    .infoDesc {
      @apply flex flex-col justify-between ml-[12px];
      .name {
        @apply text-[#ffffff] text-[32px] font-500 mb-12px;
      }
      .areaProject {
        color: rgba(255, 255, 255, 0.8);
        @apply text-[24px] flex flex-row items-center box-border;
        .agencyFlag {
          width: 24px;
          height: 24px;
          @apply box-border block object-cover mr-6px;
        }
      }
    }
  }
  .desc {
    color: rgba(255, 255, 255, 0.8);
    line-height: 36px !important;
    @apply text-[28px] font-normal mt-[32px] block;
  }
  .actions {
    @apply box-border flex flex-row items-center  pr-32px mt-32px;
    .fans,
    .zan {
      @apply text-[#FFFFFF] text-[28px] flex flex-row items-center;
    }
    .zan {
      @apply ml-24px;
    }
    .editInfo {
      @apply ml-auto;
    }

    .editInfo,
    .share {
      width: 160px;
      height: 64px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.1);
      @apply box-border flex rounded-[32px] justify-center items-center text-[28px] text-[#FFFFFF];
    }
    .share {
      @apply ml-16px;
    }
    .shareBtn {
      color: #ffffff !important;
      font-size: 28px !important;
      @apply flex flex-row items-center justify-center;
    }
    .concernBtn {
      width: 160px;
      height: 64px;
      @apply bg-[#5278FD] rounded-[32px] text-[#FFFFFF] text-[28px] flex justify-center items-center box-border gap-[4px];
      &.concerned {
        border: 1px solid rgba(255, 255, 255, 0.6);
        @apply bg-transparent;
      }
    }
  }
  .navBarPlaceholder,
  .info,
  .desc,
  .actions {
    position: relative;
    z-index: 1;
  }
  .consultBtn {
    width: 160px;
    height: 64px;
    background: #ff8615;
    @apply flex flex-row justify-center items-center box-border text-28px text-white rounded-32px mr-16px;
  }
}
.content {
  border-radius: 32px 32px 0 0;
  @apply box-border overflow-hidden relative;
  &.webviewContent {
    // margin-top: -92px;
    margin-top: -32px;
  }
  &.skylineContent {
    transform: translateY(-24px);
  }
}
.contentTabs {
  height: 92px;
  @apply flex bg-[#ffffff] px-[32px] flex-row items-center justify-center box-border;
  .contentTab {
    line-height: 92px !important;
    @apply self-stretch relative text-[#666666] text-[32px] mr-90px;
    &:last-child {
      margin-right: 0;
    }
    &::after {
      content: "";
      height: 6px;
      @apply absolute bottom-0 left-[8px] right-[8px] rounded-[10px];
    }
    &.contentTab__active {
      @apply text-[#333333] font-600;
      &::after {
        @apply bg-[#5278FD];
      }
    }
  }
  &.zuirezuixin {
    @apply justify-start;
    .contentTab {
      @apply text-32px mr-32px;
      &.contentTab__active {
        @apply font-600;
        &::after {
          @apply bg-[#FFFFFF];
        }
      }
    }
  }
}
.noteList {
  height: 100%;
  @apply px-[32px] pt-22px bg-page box-border;
  &.webviewNoteList {
    @apply pt-22px;
  }
}
